<template>
  <div>
    <div class="Recommend_topTitle">
      <div>
        人气推荐
        <van-icon name="arrow" class="Recommend_icon" />
      </div>
    </div>
    <div class="Recommend_Box">
    <div v-for="(item,index) in List.slice(9,13)" :key="index" class="Recommend">
         <div class="Recommend_box" @click="Onlist(item.id)">
             <img :src="item.pic" alt="">
             <p class="van-multi-ellipsis--l2">{{item.name}}</p>
             <p class="van-ellipsis">{{item.characteristic}}</p>
             <p class="Recommend_title">￥{{item.originalPrice}}</p>
         </div>
     </div>
    </div>
    <div class="bbox">

    </div>
  </div>
</template>
<script>
export default {
    data(){
        return{
        List:[]
        }
    },
    created(){
        this.$Acc.YanxuanList().then(res=>{
         this.List = res.data.data
        //  console.log( res.data.data)
        })
    },
    methods:{
        Onlist(id){
      this.$router.push({
        path:'/details',
        query:{
          id:id
        }
      })
      }
    }
}
</script>
<style  scoped>
.Recommend_topTitle {
  width: 100%;
  height: 3rem;
  background-color: rgb(255, 255, 255);
  font-size: 1.1rem;
  line-height: 3rem;
  text-align: center;
}
.Recommend_icon {
  padding-top: 1rem;
  font-size: 0.9rem;
}
.bbox{
    width: 100%;
    height:4rem;
}
.Recommend{
    width: 48%;

}
.Recommend_Box{
    display: flex;
     justify-content: space-around;
     flex-wrap: wrap;
}
.Recommend_box{
    width: 100%;
    height: 17rem;
 
}
.Recommend_box img{
    width: 100%;
    height: 12rem;
}
.van-multi-ellipsis--l2{
    font-size: 0.9rem;
}
.van-ellipsis{
    font-size: 0.7rem;
    margin-top: 0.5rem;
    color: rgb(189, 186, 186);
}
.Recommend_title{
    color: red;
    font-size: 0.8rem;
}
</style>